<!--数据汇总-->
<template>
  <view class="container">
    <view class="status_bar"></view>
    <scroll-view scroll-y :style="{ 'width': '100%', 'height': scrollViewHeight + 'px' }">
      <view class="center_container">
        <text class="tips_view">关键数据</text>
        <view class="card_container">
          <view class="card_item_container">
            <text class="card_item_title"> 待整改问题 </text>
            <text class="card_item_exponents_value" style="color: #EB632D;font-weight: bold;"> {{ keyData?.reform_count }}
            </text>
            <text class="card_item_exponents_tag"> 较昨日 </text>
            <view style="tips-layout">
              <image src='@/static/icon/ic_up_arrow_orange.png'
                style="height: 8px; width: 6px;margin-top: 4px;margin-right: 4px;" />
              <text class="card_item_exponents_indices" style="color: #EB632D;font-weight: bold;"> 0 </text>
            </view>
          </view>
          <view class="card_item_container">
            <text class="card_item_title"> 已整改问题 </text>
            <text class="card_item_exponents_value" style="color: #3877FF;font-weight: bold;">{{ keyData?.reformed_count
            }} </text>
            <text class="card_item_exponents_tag"> 较昨日 </text>
            <view style="tips-layout">
              <image src='@/static/icon/ic_up_arrow_blue.png'
                style="height: 8px; width: 6px;margin-top: 4px;margin-right: 4px;" />
              <text class="card_item_exponents_indices" style="color: #3877FF;font-weight: bold;"> {{
                keyData?.reformed_today_count }} </text>
            </view>
          </view>
          <view class="card_item_container">
            <text class="card_item_title"> 逾期问题 </text>
            <text class="card_item_exponents_value" style="color: #E41818;font-weight: bold;"> {{ keyData?.overdue_count
            }} </text>
            <text class="card_item_exponents_tag"> 较昨日 </text>
            <view style="tips-layout">
              <image src='@/static/icon/ic_up_arrow_red.png'
                style="height: 8px; width: 6px;margin-top: 4px;margin-right: 4px;" />
              <text class="card_item_exponents_indices" style="color: #E41818;font-weight: bold;"> {{
                keyData?.overdue_today_count }} </text>
            </view>
          </view>
          <view class="card_item_container">
            <text class="card_item_title"> 整改率 </text>
            <text class="card_item_exponents_value" style="color: #27AFAF;font-weight: bold;"> {{ keyData?.reformed_rate
            }}%</text>
            <text class="card_item_exponents_tag"> 较昨日 </text>
            <view style="tips-layout">
              <image src='@/static/icon/ic_up_arrow_pale_blue.png'
                style="height: 8px; width: 6px;margin-top: 4px;margin-right: 4px;" />
              <text class="card_item_exponents_indices" style="color: #27AFAF;font-weight: bold;"> {{
                keyData?.reformed_today_rate }} </text>
            </view>
          </view>
        </view>
        <text class="spot"> 发现问题 </text>
        <view class="card_container_column" style="
            padding-top: 20px;
            padding-bottom: 11px;">
          <view
            style="display: flex; flex-direction: row; width: 100%; box-sizing: border-box; padding-left: 15px;padding-right: 15px;">
            <view style="display: flex; flex-direction: row;flex: 1; ">
              <text style="color: #333333" class="question-count-text">问题总数</text>
              <text style="color: #eb632d; margin-left: 12px;font-weight: bold;" class="question-count-text">{{
                problemCountData.total_problem_count }}</text>
            </view>
            <view style="display: flex; flex-direction: row;flex: 1; justify-content: flex-end;margin-left: 10px;">
              <text style="color: #333333" class="question-count-text">今日发现数</text>
              <text style="color: #10AC64; margin-left: 12px;font-weight: bold;" class="question-count-text">{{
                problemCountData.today_discover_problem_count }}</text>
            </view>
          </view>

          <view
            style="display: flex; flex-direction: row ;width: 100%; margin-top:18px; margin-bottom:18px ;box-sizing: border-box; padding-left: 15px;padding-right: 15px;">
            <view class="question-box">
              <text>静态问题</text>
              <text style="font-weight: bold; margin-left: 13px;">{{ problemCountData.static_count }}</text>
            </view>
            <view class="question-box" style="margin-left: 20px;background: #0DA863;">
              <text>动态问题</text>
              <text style="font-weight: bold; margin-left: 13px;">{{ problemCountData.dynamic_count }}</text>
            </view>
          </view>
          <view class="charts-box" style="display: flex;justify-content: center; align-items: center; ">
            <!--echart-->
            <l-echart ref="mychart"></l-echart>
          </view>
        </view>
        <text class="spot"> 网格整改率 </text>
        <view class="card_container_column" style="
            padding-top: 20px;
            padding-left: 14px;
            padding-right: 14px;
            padding-bottom: 11px; height: 262px;
          ">
          <view class="card_container_title_box">
            <text>网格名称</text>
            <text style="margin-left: 10px; margin-right: 10px;justify-content:center">待整改问题数</text>
            <text style="justify-content:center">整改率</text>
          </view>
          <scroll-view scroll-y style="width: 100%; height: 185px;">
            <template v-for="item in gridList" :key="item">
              <view class="card_container_content_box">
                <text style="width: 100px;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{
                  item.grid_name }}</text>
                <text class="flex_text" style="margin-left: 10px; margin-right: 10px;justify-content:center">{{
                  item.reform_count }}</text>
                <text class="flex_text" style="justify-content:center">{{ item.reformed_rate }}%</text>
              </view>
            </template>
          </scroll-view>
        </view>
        <view style="padding-top: 10px;"></view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { ref } from "vue";
import type { GridItemData, KeyData, DiscoverProblemCountData, DiscoverProblemRegionCountData } from '@/api/bean/PageListWrap'
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { getKeyData, findQuestionCount, gridReformProblemCount, discoverProblemRegionCount } from "@/api/common"
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
import * as echarts from 'echarts/core';
import {
  ToolboxComponent,
  ToolboxComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption
} from 'echarts/components';
import {
  BarChart,
  BarSeriesOption,
  LineChart,
  LineSeriesOption
} from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
  | ToolboxComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | BarSeriesOption
  | LineSeriesOption
>;

let mychart = ref(null) // 存放echart的实例化对象

//echart 引入 end ////************ */
//页面高度
let screenHeight = ref(0);
let screenWidth = ref(0);
let scrollViewHeight = ref(0);
let statusBarHeight = ref(0);
let gridList = ref<GridItemData[]>()
let keyData = ref<KeyData>({
  reform_count: 0, // 待整改问题
  reformed_count: 0, // 已整改问题
  reformed_rate: 0, // 整改率
  overdue_count: 0, // 逾期问题
  overdue_today_count: 0, // 逾期问题较昨日
  reformed_today_count: 0, // 已整改问题较昨日
  reformed_today_rate: 0  // 整改率较昨日
})
let problemCountData = ref<DiscoverProblemCountData>(
  {
    total_problem_count: 0,
    today_discover_problem_count: 0,
    dynamic_count: 0,
    static_count: 0,
  }

)
//底部容器高度
uni.getSystemInfo({
  success: (result) => {
    // console.log(result);
    const topBarHeight: number = result.statusBarHeight as number;
    const height = result.windowHeight;
    const width = result.windowWidth;
    const scrollHeight = height - topBarHeight;
    screenHeight.value = height;
    screenWidth.value = width;
    scrollViewHeight.value = scrollHeight;
    statusBarHeight.value = topBarHeight;
  },
  fail: (error) => { },
});

onMounted(() => {

})
onPullDownRefresh(() => {
  loadData()
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000);
})
onLoad(() => {
  loadData()
})
async function loadData() {
  keyData.value = await getKeyData() as KeyData
  problemCountData.value = await findQuestionCount() as DiscoverProblemCountData
  gridList.value = await gridReformProblemCount() as GridItemData[]
  let result = await discoverProblemRegionCount() as DiscoverProblemRegionCountData[]
  let categories: any[] = []//分类 
  let taskArray: any[] = []
  let takeArray: any[] = []
  let reformRateArray: any[] = []
  result.forEach(item => {
    categories.push(item.region_name as string)
    taskArray.push(item.resource?.filter(item => item.resource_type === "常规任务")[0].problem_count)
    takeArray.push(item.resource?.filter(item => item.resource_type === "随手拍")[0].problem_count)
    reformRateArray.push(item.reform_rate as number)
  })
  mychart.value.init(echarts, chart => {
    chart.resize({ width: 400, height: 350 })
    chart.setOption(getChartOptionDatas(categories, taskArray, takeArray, reformRateArray));
  });
  function getChartOptionDatas(categories, taskArray, takeArray, reformRateArray) {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: false, readOnly: false },
          magicType: { show: false, type: ['line', 'bar'] },
          restore: { show: false },
          saveAsImage: { show: false }
        }
      },
      legend: {
        data: ['常规任务', '随手拍', '整改率']
      },
      xAxis: [
        {
          type: 'category',
          data: categories,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '',
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value} %'
          }
        },
        {
          type: 'value',
          name: '随手拍',
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: [
        {
          name: '常规任务',
          type: 'bar',
          stack: 'www',
          tooltip: {
            valueFormatter: function (value) {
              return value as number + "";
            }
          },
          data: taskArray
        },
        {
          name: '随手拍',
          type: 'bar',
          stack: 'www',
          tooltip: {
            valueFormatter: function (value) {
              return value as number + "";
            }
          },
          data: takeArray
        },
        {
          name: '整改率',
          type: 'line',
          stack: 'www',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value as number + ' %';
            }
          },
          data: reformRateArray
        }
      ]
    }
  }
}
</script>

<style lang="less">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #16c176 20%, #eeee 40%);
}

.tips-layout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.center_container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

}

.tips_view {
  font-size: 16px;
  font-weight: normal;
  color: #ffffff;
  margin-top: 60px;
  margin-left: 20px;
}

.card_container {
  margin: 8px;
  border-radius: 10px;
  background-color: #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .card_item_container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0px 20px 0px;
    flex: 1;

    .card_item_title {
      font-size: 12px;
      color: #333333;
    }

    //指数
    .card_item_exponents_value {
      margin-top: 5px;
      font-size: 12px;
      color: #eb632d;
    }

    .card_item_exponents_tag {
      margin-top: 5px;
      font-size: 12px;
      color: #959799;
    }

    .card_item_exponents_indices {
      margin-top: 5px;
      font-size: 12px;
      color: #eb632d;
    }
  }
}

.spot {
  font-size: 16px;
  color: #7b8289;
  margin-top: 12px;
  margin-left: 22px;
}

.question-count-text {
  font-size: 14px;
}

.charts-box {
  width: 100%;
  box-sizing: border-box;
}

.card_container_column {
  margin: 8px;
  border-radius: 10px;
  background-color: #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.question-box {
  border-radius: 4px;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  -webkit-transform: skewX(-10deg);
  box-shadow: -1px 0 2px 0 rgba(46, 84, 200, 0.2);
  transform: skewX(-10deg);
  background: #2B6EFF;
  border-top-left-radius: 4px;

  text {
    font-size: 12px;
    color: #FFFFFF;
  }

}

.card_container_title_box {
  border-radius: 4px;
  width: 100%;
  background: #E0E3EB;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 9px;
  padding-right: 9px;
  display: flex;
  flex-direction: row;

  text {
    font-size: 12px;
    color: #5F6061;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
  }
}

.card_container_content_box {
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 9px;
  padding-right: 9px;
  display: flex;
  flex-direction: row;

  text {
    font-size: 12px;
    color: #2E2E2E;

  }

  .flex_text {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

::-webkit-scrollbar {

  width: 4px !important;
  height: 38px !important;

  background-color: #F4F4F4;

}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {


  background-color: #F4F4F4;

}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {

  background-color: #D8D8D8;

}
</style>
